<!--
设备概览页面
-->
<template>
  <rj-modal
    :visible="isDeviceAll"
    width="680px"
    :title="title"
    @cancel="closeTotalWin"
    @ok="submitTotalForm"
  >
    <a-form-model
      ref="globalForm"
      style="padding: 16px"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :model="formData"
    >
      <a-form-model-item
        :label="$t('exportPdf.deviceSno')"
        prop="productClass"
        :rules="{
          required: true,
          validator: validateProductClass,
          trigger: 'blur',
        }"
      >
        <a-input
          v-model="formData.productClass"
          :maxLength="32"
          :disabled="oldData.id && oldData.id != ''"
        />
      </a-form-model-item>
      <a-form-model-item
        :label="$t('exportPdf.deviceTyoe1')"
        prop="productType"
      >
        <a-select @change="handleChange" v-model="formData.productType">
          <a-select-option
            v-for="(item, index) in selectList"
            :value="item"
            :key="index"
          >
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        v-if="formData.productType == `${$t('exportPdf.custom')}`"
        :label="$t('exportPdf.customType')"
        prop="otherType"
        :rules="{
          required: true,
          validator: validateType,
          trigger: 'blur',
        }"
      >
        <a-input
          v-model="otherType"
          :placeholder="$t('exportPdf.enterCustomType')"
        />
      </a-form-model-item>
      <a-form-model-item :label="$t('exportPdf.number1')" prop="amount">
        <a-input-number
          v-model.number="formData.amount"
          :min="0"
          :max="10000"
          :maxLength="10000"
          :placeholder="$t('exportPdf.maxNumber')"
        />
      </a-form-model-item>
      <a-form-model-item :label="$t('exportPdf.productDecript1')" prop="remark">
        <a-textarea
          v-model="formData.remark"
          :auto-size="{ minRows: 5, maxRows: 8 }"
          :maxLength="1000"
        />
      </a-form-model-item>
    </a-form-model>
  </rj-modal>
</template>
<script>
import { mapState } from 'vuex';
import { requestHttp, ValiDateTools, maccApi } from '@utils/index';
import { RjModal } from '@components';
import { i18nRender } from '@/locales';

export default {
  name: 'deviceAllWin',
  props: {
    oldData: Object,
  },
  components: {
    'rj-modal': RjModal,
  },
  data() {
    let validateProductClass = function (rule, value, callback) {
      if (value === null || value === undefined || value === '') {
        return callback(new Error(i18nRender('exportPdf.deviceSNNoNull')));
      }
      if (value.length > 32) {
        return callback(new Error(i18nRender('exportPdf.maxLength32')));
      }
      callback();
    };
    return {
      formData: {
        productClass: '',
        productType: this.$t('exportPdf.switch'),
        amount: 0,
        remark: '',
        desc: '',
      },
      rules: {
        productClass: [
          {
            required: true,
            message: this.$t('exportPdf.tips1'),
            trigger: 'blur',
          },
        ],
      },

      otherType: '',
      selectList: [
        this.$t('exportPdf.switch'),
        this.$t('exportPdf.gateway'),
        'AC',
        this.$t('exportPdf.firewall'),
        this.$t('exportPdf.wirelessAP'),
        this.$t('exportPdf.reyeeNetworkAP'),
        this.$t('exportPdf.custom'),
      ],
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      isDeviceAll: false,
      validateProductClass,
    };
  },
  mounted() {},
  created() {
    this.initView();
  },
  methods: {
    initView() {
      if (this.oldData && this.oldData.id) {
        this.title = this.$t('exportPdf.editDeviceOverview');
        this.formData = Object.assign(this.oldData);
      } else {
        this.title = this.$t('exportPdf.addDeviceOverview');
        this.formData = {
          productClass: '',
          productType: this.$t('exportPdf.switch'),
          amount: 0,
          remark: '',
          desc: '',
        };
      }
    },
    addDeviceTotal() {
      this.isDeviceAll = true;
    },
    closeTotalWin() {
      this.$refs.globalForm.resetFields();
      this.isDeviceAll = false;
    },
    validateType(rule, value, callback) {
      let val = this.otherType;
      if (this.formData.productType == this.$t('exportPdf.custom')) {
        if (val === null || val === undefined || val === '') {
          return callback(new Error(i18nRender('exportPdf.require')));
        } else {
          const results = ValiDateTools.checkAliasName(val, 32);
          if (results.result) {
            callback();
          } else {
            callback(results.msg);
          }
        }
      }
      return callback();
    },
    handleChange() {},
    submitTotalForm() {
      this.$refs.globalForm.validate((valid) => {
        if (valid) {
          this.setDevicesTotaltRemark();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    setDevicesTotaltRemark() {
      let params = {
        ...this.formData,
        groupId: this.groupId,
      };
      if (this.formData.productType == this.$t('exportPdf.custom')) {
        params.productType = this.otherType;
      }
      let api = maccApi.DELIVERY_DEVICE_OVERVIEW_ADD;
      let method = 'POST';
      if (this.oldData && this.oldData.id) {
        //编辑设备概况
        api = maccApi.DELIVERY_DEVICE_OVERVIEW_REMARK;
        params.id = this.oldData.id;
        method = 'PUT';
      }
      requestHttp({
        api: api,
        method: method,
        params: params,
      }).then((ret) => {
        if (ret.code == 0) {
          this.closeTotalWin();
          this.$emit('getTotalDevice');
        } else {
          this.$message.error(ret.msg);
        }
      });
    },
  },
  watch: {
    oldData() {
      this.initView();
    },
  },
  computed: {
    ...mapState('Group', ['groupId']),
  },
};
</script>
<style lang="less" scoped></style>
